import { FormOutlined } from '@ant-design/icons';
import { Breadcrumb, Button, Form, Input, Spin, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { UploadPhoto } from '@/components/UploadPhoto';
import styles from './index.less';
import { updateInfo } from './service';

const ProfitSetting = ({ currentUser }) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [disabled, setDisabled] = useState<boolean>(true);
  const [photoInstance, setPhotoInstance] = useState<{}>({});

  const [userMsgForm] = Form.useForm();

  const initFormMsg = () => {
    const { name, bankName, bankCardNo, phone, identityCardNo } = currentUser;
    return {
      name,
      bankName,
      bankCardNo,
      phone,
      identityCardNo,
    };
  };

  useEffect(() => {
    userMsgForm.setFieldsValue(initFormMsg());
  }, []);

  const formItemLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 10 },
  };

  const submitForm = async () => {
    // const { code, data } = await updateInfo(userMsgForm.getFieldValue())
    setLoading(true);
    const { code, info } = await updateInfo({
      ...userMsgForm.getFieldValue(),
      idFrontPicUrl: photoInstance.front,
      idBackPicUrl: photoInstance.back,
      bankPicUrl: photoInstance.bankCard,
    });

    if (code != 0) {
      message.error(info);
      return;
    }

    setLoading(false);
    setDisabled(true);
    message.success('修改成功');
  };

  const photoArray = [
    {
      type: 'front',
      title: '身份证正面',
      url: currentUser.idFrontPicUrl,
    },
    {
      type: 'back',
      title: '身份证背面',
      url: currentUser.idBackPicUrl,
    },
    {
      type: 'bankCard',
      title: '银行卡正面',
      url: currentUser.bankPicUrl,
    },
  ];

  return (
    <div className={styles.main}>
      <Breadcrumb>
        <Breadcrumb.Item>我的收益</Breadcrumb.Item>
        <Breadcrumb.Item>结算设置</Breadcrumb.Item>
      </Breadcrumb>

      <Spin spinning={loading}>
        <div className={styles.content}>
          <div className={styles.title}>收款人信息</div>
          <div className={styles['msg-box']}>
            <div className={styles['edit-box']}>
              {disabled && (
                <div
                  className={styles['edit-btn']}
                  onClick={() => {
                    setDisabled(false);
                  }}
                >
                  <FormOutlined />
                  <span>修改</span>
                </div>
              )}
            </div>
            <Form form={userMsgForm}>
              <Form.Item {...formItemLayout} label="账 户 名：" name="name">
                <Input disabled={disabled} />
              </Form.Item>
              <Form.Item {...formItemLayout} label="银行名称：" name="bankName">
                <Input disabled={disabled} />
              </Form.Item>
              {/* <Form.Item {...formItemLayout} label="开户支行：" name=''>
                <Input disabled={disabled} />
              </Form.Item> */}
              <Form.Item {...formItemLayout} label="银行卡号：" name="bankCardNo">
                <Input disabled={disabled} />
              </Form.Item>
              <Form.Item {...formItemLayout} label="联系方式：" name="phone">
                <Input disabled={disabled} />
              </Form.Item>
              <Form.Item {...formItemLayout} label="身份证号：" name="identityCardNo">
                <Input disabled={disabled} />
              </Form.Item>
              <Form.Item {...formItemLayout} label="身份证照：">
                <div className={styles['pic-box']}>
                  {disabled && <div className={styles['disable-mask']} />}
                  <UploadPhoto
                    action="/service/score/imageUpload"
                    photoArray={photoArray}
                    onChange={(result: {}) => {
                      setPhotoInstance({ ...result });
                    }}
                  />
                </div>

                {!disabled && (
                  <>
                    <p>请上传身份证正反面照片或扫描件</p>
                    <div className={styles['result-btn']}>
                      <Button className={styles['submit-btn']} onClick={submitForm}>
                        提交
                      </Button>
                      <Button
                        onClick={() => {
                          setDisabled(true);
                        }}
                      >
                        取消
                      </Button>
                    </div>
                  </>
                )}
              </Form.Item>
            </Form>
          </div>
        </div>
      </Spin>
    </div>
  );
};

export default connect(({ user: currentUser }) => ({ ...currentUser }))(ProfitSetting);
